<template>
    <div class="img-squared-box">
        <div class="body">
            <div
                class="item"
                v-for="(item, index) in imgList"
                :key="index"
                @click="showImageDetail(item)"
            >
                <div class="content">
                    <CenterBox>
                        <template>
                            <img :src="item" />
                        </template>
                    </CenterBox>
                </div>
            </div>
        </div>
        <ImgListPreview />
        <FullImgView v-model="showFullView" :src="currentImg" />
    </div>
</template>

<script>
import CenterBox from "./centerBox";
import FullImgView from "./fullImgView";
import ImgListPreview from "@/pages/community/components/imgListPreview/index";
export default {
    components: {
        CenterBox,
        FullImgView,
        ImgListPreview
    },
    props: {
        imgList: {
            type: Array
        }
    },
    data() {
        return {
            showFullView: false,
            currentImg:
                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=338891399,2821344225&fm=26&gp=0.jpg"
        };
    },

    methods: {
        showImageDetail(item) {
            this.showFullView = true;
            this.currentImg = item.url;
        }
    }
};
</script>


<style lang="less" scoped>
.img-squared-box {
    .body {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;

        .item {
            position: relative;
            flex: 0 0 auto;
            width: 32%;
            padding-top: 32%;
            overflow: hidden;
            margin-bottom: 10px;

            .content {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>